<script setup>
import { orderPayInfoAPI } from '@/apis/order'
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useCountDown } from '@/composables/useCountDown'
import { useUserStore } from '@/stores/userStore'
const { formatTime, start } = useCountDown()
// 获取订单数据
const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
const payInfo = ref({})
const getPayInfo = async () => {
	// const res = await getOrderAPI(route.query.id)
	// payInfo.value = res.result
	// 初始化倒计时分钟
	// start(res.result.countdown)
	start(900)
}
// 支付方式  默认1
const payType = ref(1)
const handlePayType = (type) => {
	payType.value = type
}

// 点击立即支付
const handleSubmit = async () => {
	await orderPayInfoAPI(route.query.id)

	router.push({
		path: '/paycallback'
	})
}
onMounted(() => getPayInfo())

// 跳转支付
// 携带订单id以及回调地址跳转到支付地址（get）
// 支付地址
const baseURL = 'http://pcapi-xiaotuxian-front-devtest.itheima.net/'
const backURL = 'http://127.0.0.1:5173/paycallback'
const redirectUrl = encodeURIComponent(backURL)
const payUrl = `${baseURL}pay/aliPay?orderId=${route.query.id}&redirect=${redirectUrl}`
</script>


<template>
	<div class="xtx-pay-page">
		<div class="container">
			<!-- 付款信息 -->
			<div class="pay-info">
				<div class="left">
					<!-- <span>二 维 码</span> -->
					<img class="qrCode" src="../../assets/images/qrcode.jpg" alt="" />
					<!-- <el-image
						class="qrCode"
						src="src/assets/images/qrcode.jpg"
						:zoom-rate="1.2"
						:max-scale="7"
						:min-scale="0.2"
						:preview-src-list="['src/assets/images/qrcode.jpg']"
						fit="cover"
					/> -->
					<div class="tip">
						<p class="time">订单已提交-请在{{ formatTime }}内完成支付</p>
						<p class="tip-text">
							<el-icon><CaretLeft /></el-icon>打开微信/支付宝-扫码支付
						</p>
					</div>
				</div>
				<div class="right">
					<div class="top">
						<span class="text">应付金额：</span>
						<span class="money"
							>¥ <span class="large">{{ (route.query.money / 100).toFixed(2) }}</span></span
						>
					</div>
					<div class="bottom">
						<span class="text">订单编号：</span>
						<span class="num">{{ route.query.id }}</span>
					</div>
				</div>
			</div>
			<!-- 付款方式 -->
			<div class="pay-type">
				<div class="item" @click="handlePayType(1)">
					<div class="icon">
						<div v-if="payType == 1" class="active"></div>
					</div>
					<div class="text">余额支付</div>
					<div class="desc">（余额：{{ userStore.userInfo.accountBalance ? `&yen;${userStore.userInfo.accountBalance}` : 0 }}）</div>
				</div>
				<div class="item" @click="handlePayType(2)">
					<div class="icon">
						<div v-if="payType == 2" class="active"></div>
					</div>
					<div class="text">瓶盖支付</div>
					<div class="desc">（瓶盖余额：{{ userStore.userInfo.bcCount || 0 }}）</div>
				</div>
				<el-button class="submit-btn" type="primary" @click="handleSubmit">确定支付</el-button>
			</div>
		</div>
		<CartButton />
	</div>
</template>

<style scoped lang="scss">
.xtx-pay-page {
	padding-top: 20px;
	background-color: #f4f4f4;
	min-height: calc(100vh - 151px);
}

.pay-info {
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	padding: 25px 30px 35px;
	.left {
		display: flex;
		align-items: center;
		.qrCode {
			width: 120px;
			height: 120px;
			margin-right: 16px;
		}
		.tip {
			height: 120px;
			display: flex;
			flex-flow: column;
			justify-content: space-between;
			.time {
				font-size: 24px;
				color: #333333;
				line-height: 36px;
			}
			.tip-text {
				font-size: 14px;
				color: $xtxColor;
				line-height: 21px;
				display: flex;
				align-items: center;
			}
		}
	}
	.right {
		display: flex;
		flex-flow: column;
		justify-content: space-between;
		align-items: end;
		font-size: 14px;
		line-height: 21px;
		color: #333333;
		.money {
			font-weight: 700;
			color: #c30d23;
			.large {
				font-size: 24px;
			}
		}
		.text {
			color: #999999;
		}
	}
}

.pay-type {
	margin-top: 25px;
	background-color: #fff;
	padding: 38px 33px;
	text-align: center;
	.item {
		font-size: 14px;
		line-height: 21px;
		margin-bottom: 72px;
		display: flex;
		cursor: pointer;
		.icon {
			width: 24px;
			height: 24px;
			border: 1px solid $xtxColor;
			display: flex;
			align-items: center;
			justify-content: center;
			.active {
				width: 10px;
				height: 10px;
				background-color: $xtxColor;
			}
		}
		.text {
			color: #000000;
			margin: 0 30px;
		}
		.desc {
			color: #999999;
		}
	}
	.submit-btn {
		margin-top: 250px;
		width: 338px;
		height: 85px;
		font-weight: 700;
		font-size: 24px;
	}
}
</style>